HTML5 面试题

1. HTML5 有哪些新特性？

Details

HTML5 引入了许多新特性，以下是一些主要的新特性：

1. 语义化标签

<header>：页面头部
<nav>：导航菜单
<section>：页面区块
<article>：文章内容
<aside>：侧边栏
<footer>：页面底部
<main>：主要内容
<figure>：图片和说明
<figcaption>：图片说明

2. 表单增强

新的输入类型：email、tel、url、number、range、date、time、color 等
新的表单属性：placeholder、required、autofocus、pattern、min、max、step 等
表单验证 API

3. 多媒体支持

<audio>：音频播放
<video>：视频播放
<source>：指定媒体资源
<track>：字幕轨道

4. Canvas

2D 绘图 API
用于绘制图形、动画、游戏等

5. SVG

可缩放矢量图形
用于绘制图标、图形等

6. Web 存储

localStorage：本地存储，永久保存
sessionStorage：会话存储，会话结束后清除

7. 地理定位

navigator.geolocation API
获取用户位置信息

8. Web Workers

后台线程，用于处理耗时操作
避免阻塞主线程

9. Web Sockets

实时双向通信
用于聊天、游戏等实时应用

10. 其他新特性

拖放 API
历史 API
全屏 API
通知 API
设备方向 API

2. 什么是语义化标签？使用语义化标签的好处是什么？

Details

语义化标签是指能够清晰地描述其内容含义的 HTML 标签，而不仅仅是用于布局的容器。

语义化标签的好处

提高代码可读性：语义化标签使 HTML 结构更清晰，更容易理解。
有利于 SEO：搜索引擎可以更好地理解页面内容，提高搜索排名。
改善无障碍访问：屏幕阅读器等辅助技术可以更好地理解页面结构，提高无障碍性。
便于维护：语义化标签使代码更易于维护和修改。
跨设备兼容性：语义化标签在不同设备上的显示效果更一致。

常用的语义化标签

<header>：页面或区块的头部
<nav>：导航菜单
<section>：页面中的逻辑区块
<article>：独立的文章内容
<aside>：侧边栏或补充内容
<footer>：页面或区块的底部
<main>：页面的主要内容
<figure>：图片、图表等媒体内容
<figcaption>：媒体内容的说明

3. Canvas 和 SVG 的区别是什么？

Details

Canvas 和 SVG 都是 HTML5 中用于绘制图形的技术，但它们有以下区别：

Canvas

基于像素：Canvas 是基于像素的绘图，绘制的是位图。
命令式：通过 JavaScript 命令绘制图形。
性能：适合绘制大量图形，性能较好。
可缩放性：放大后会失真。
事件处理：需要自己实现事件检测。
适用场景：游戏、动画、数据可视化等。

SVG

基于矢量：SVG 是基于矢量的绘图，绘制的是矢量图形。
声明式：通过 XML 标记绘制图形。
性能：绘制大量图形时性能较差。
可缩放性：放大后不会失真。
事件处理：支持直接的事件处理。
适用场景：图标、 logos、图表等。

示例

Canvas：

html

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 150, 80);
</script>

SVG：

html

<svg width="200" height="100">
  <rect width="150" height="80" x="10" y="10" fill="red" />
</svg>

4. HTML5 中的 Web 存储有哪些？它们的区别是什么？

Details

HTML5 中的 Web 存储主要包括 localStorage 和 sessionStorage。

localStorage

存储容量：约 5MB
存储时间：永久存储，除非手动清除
作用域：同源的所有窗口和标签页
API：
- localStorage.setItem(key, value)：存储数据
- localStorage.getItem(key)：获取数据
- localStorage.removeItem(key)：删除数据
- localStorage.clear()：清空所有数据

sessionStorage

存储容量：约 5MB
存储时间：会话期间，关闭窗口或标签页后清除
作用域：当前窗口或标签页
API：与 localStorage 相同

示例

javascript

// 使用 localStorage
localStorage.setItem('name', 'John');
const name = localStorage.getItem('name');
console.log(name); // 输出: John

// 使用 sessionStorage
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');
console.log(token); // 输出: abc123

存储容量：Cookie 只有约 4KB，而 Web 存储有约 5MB
传输：Cookie 会在每次请求时发送到服务器，而 Web 存储不会
过期时间：Cookie 可以设置过期时间，而 sessionStorage 在会话结束后清除，localStorage 永久存储
API：Web 存储提供了更简洁的 API

5. 如何在 HTML5 中实现拖放功能？

Details

HTML5 提供了原生的拖放 API，用于实现元素的拖放功能。

基本步骤

设置元素为可拖动：给元素添加 draggable="true" 属性。
监听拖动事件：
- dragstart：开始拖动时触发
- drag：拖动过程中持续触发
- dragend：拖动结束时触发
设置放置目标：
- dragover：拖动元素经过放置目标时触发
- drop：在放置目标上释放元素时触发

示例

html

<!DOCTYPE html>
<html>
<head>
  <style>
    #dragElement { width: 100px; height: 100px; background: red; color: white; text-align: center; line-height: 100px; }
    #dropTarget { width: 200px; height: 200px; border: 2px dashed black; margin-top: 20px; text-align: center; line-height: 200px; }
  </style>
</head>
<body>
  <div id="dragElement" draggable="true">拖动我</div>
  <div id="dropTarget">放置到这里</div>

  <script>
    const dragElement = document.getElementById('dragElement');
    const dropTarget = document.getElementById('dropTarget');

    // 拖动开始
    dragElement.addEventListener('dragstart', function(e) {
      e.dataTransfer.setData('text/plain', 'This is the dragged element');
    });

    // 拖动经过
    dropTarget.addEventListener('dragover', function(e) {
      e.preventDefault(); // 必须调用，否则 drop 事件不会触发
    });

    // 放置
    dropTarget.addEventListener('drop', function(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      dropTarget.innerHTML = '已放置: ' + data;
    });
  </script>
</body>
</html>

数据传输

dataTransfer.setData(type, data)：设置拖动数据
dataTransfer.getData(type)：获取拖动数据
dataTransfer.effectAllowed：设置允许的操作（copy、move、link 等）
dataTransfer.dropEffect：设置放置效果

6. HTML5 中的地理定位 API 如何使用？

Details

HTML5 的地理定位 API 允许网页获取用户的地理位置信息。

基本使用

javascript

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error, options);
} else {
  console.log('Geolocation is not supported by this browser.');
}

function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  console.log('Latitude: ' + latitude + ', Longitude: ' + longitude);
}

function error(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      console.log('User denied the request for Geolocation.');
      break;
    case error.POSITION_UNAVAILABLE:
      console.log('Location information is unavailable.');
      break;
    case error.TIMEOUT:
      console.log('The request to get user location timed out.');
      break;
    case error.UNKNOWN_ERROR:
      console.log('An unknown error occurred.');
      break;
  }
}

const options = {
  enableHighAccuracy: true, // 启用高精度
  timeout: 5000, // 超时时间
  maximumAge: 0 // 缓存时间
};

监视位置变化

javascript

if (navigator.geolocation) {
  const watchId = navigator.geolocation.watchPosition(success, error, options);
  
  // 停止监视
  // navigator.geolocation.clearWatch(watchId);
}

注意事项

需要用户授权
可能会消耗电池电量
精度取决于设备和环境
在 HTTPS 环境下才能使用

7. HTML5 中的 Web Workers 是什么？如何使用？

Details

Web Workers 是 HTML5 中的一个特性，允许在后台线程中运行 JavaScript 代码，避免阻塞主线程。

基本使用

创建 Worker：

javascript

// main.js
const worker = new Worker('worker.js');

// 发送消息给 Worker
worker.postMessage('Hello Worker!');

// 接收 Worker 的消息
worker.onmessage = function(e) {
  console.log('Received from worker:', e.data);
};

// 处理错误
worker.onerror = function(e) {
  console.error('Worker error:', e);
};

// 终止 Worker
// worker.terminate();

Worker 代码：

javascript

// worker.js
// 接收主线程的消息
self.onmessage = function(e) {
  console.log('Received from main:', e.data);
  
  // 执行耗时操作
  const result = performHeavyCalculation();
  
  // 发送结果给主线程
  self.postMessage(result);
};

function performHeavyCalculation() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

类型

Dedicated Workers：专用 Worker，只能被创建它的脚本使用。
Shared Workers：共享 Worker，可以被多个脚本使用。

限制

不能访问 DOM
不能使用 window 对象
不能使用 document 对象
不能使用 parent 对象
只能通过消息传递与主线程通信

适用场景

数据处理
图像处理
复杂计算
网络请求

8. HTML5 中的 Web Sockets 是什么？如何使用？

Details

Web Sockets 是 HTML5 中的一个特性，提供了双向通信的能力，允许服务器和客户端之间建立持久连接。

基本使用

javascript

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');

// 连接建立时
socket.onopen = function() {
  console.log('WebSocket connected');
  // 发送消息
  socket.send('Hello Server!');
};

// 接收消息
socket.onmessage = function(e) {
  console.log('Received:', e.data);
};

// 连接关闭时
socket.onclose = function(e) {
  console.log('WebSocket closed:', e.code, e.reason);
};

// 发生错误时
socket.onerror = function(error) {
  console.error('WebSocket error:', error);
};

// 关闭连接
// socket.close();

特点

双向通信：服务器和客户端可以随时发送消息
持久连接：连接保持打开状态，不需要重新建立
低延迟：比 HTTP 请求更快
轻量级：消息格式简单，开销小

适用场景

实时聊天
在线游戏
实时数据更新
股票行情
多人协作工具

9. HTML5 中的表单验证 API 如何使用？

Details

HTML5 提供了内置的表单验证 API，用于验证用户输入。

基本验证

html

<form>
  <input type="email" required placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="password" required minlength="8" placeholder="Password">
  <input type="number" min="1" max="100" placeholder="Age">
  <button type="submit">Submit</button>
</form>

JavaScript 验证

javascript

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  if (!form.checkValidity()) {
    e.preventDefault();
    console.log('Form is invalid');
  }
});

// 自定义验证
const passwordInput = document.querySelector('input[type="password"]');

passwordInput.setCustomValidity('Password must contain at least one number and one letter');

passwordInput.addEventListener('input', function() {
  const password = this.value;
  if (password.match(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/)) {
    this.setCustomValidity('');
  } else {
    this.setCustomValidity('Password must contain at least one number and one letter');
  }
});

验证属性

required：必填
minlength：最小长度
maxlength：最大长度
min：最小值
max：最大值
step：步长
pattern：正则表达式
type：输入类型（email、tel、url 等）

验证状态

valid：验证通过
invalid：验证失败
pristine：未被修改
dirty：已被修改
touched：已被聚焦
untouched：未被聚焦

10. HTML5 中的多媒体标签有哪些？如何使用？

Details

HTML5 提供了 <audio> 和 <video> 标签，用于播放音频和视频。

音频标签

html

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

视频标签

html

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video element.
</video>

常用属性

controls：显示控制栏
autoplay：自动播放
loop：循环播放
muted：静音
preload：预加载（auto、metadata、none）
width：宽度
height：高度

JavaScript 控制

javascript

const video = document.querySelector('video');

// 播放
video.play();

// 暂停
video.pause();

// 设置音量
video.volume = 0.5; // 0-1

// 设置当前时间
video.currentTime = 30; // 秒

// 监听事件
video.addEventListener('play', function() {
  console.log('Video started playing');
});

video.addEventListener('ended', function() {
  console.log('Video ended');
});

HTML5 面试题 ​

1. HTML5 有哪些新特性？ ​

1. 语义化标签 ​

2. 表单增强 ​

3. 多媒体支持 ​

4. Canvas ​

5. SVG ​

6. Web 存储 ​

7. 地理定位 ​

8. Web Workers ​

9. Web Sockets ​

10. 其他新特性 ​

2. 什么是语义化标签？使用语义化标签的好处是什么？ ​

语义化标签的好处 ​

常用的语义化标签 ​

3. Canvas 和 SVG 的区别是什么？ ​

Canvas ​

SVG ​

示例 ​

4. HTML5 中的 Web 存储有哪些？它们的区别是什么？ ​

localStorage ​

sessionStorage ​

示例 ​

与 Cookie 的区别 ​

5. 如何在 HTML5 中实现拖放功能？ ​

基本步骤 ​

示例 ​

数据传输 ​

6. HTML5 中的地理定位 API 如何使用？ ​

基本使用 ​

监视位置变化 ​

注意事项 ​

7. HTML5 中的 Web Workers 是什么？如何使用？ ​

基本使用 ​

类型 ​

限制 ​

适用场景 ​

8. HTML5 中的 Web Sockets 是什么？如何使用？ ​

基本使用 ​

特点 ​

适用场景 ​

9. HTML5 中的表单验证 API 如何使用？ ​

基本验证 ​

JavaScript 验证 ​

验证属性 ​

验证状态 ​

10. HTML5 中的多媒体标签有哪些？如何使用？ ​

音频标签 ​

视频标签 ​

常用属性 ​

JavaScript 控制 ​

HTML5 面试题

1. HTML5 有哪些新特性？

1. 语义化标签

2. 表单增强

3. 多媒体支持

4. Canvas

5. SVG

6. Web 存储

7. 地理定位

8. Web Workers

9. Web Sockets

10. 其他新特性

2. 什么是语义化标签？使用语义化标签的好处是什么？

语义化标签的好处

常用的语义化标签

3. Canvas 和 SVG 的区别是什么？

Canvas

SVG

示例

4. HTML5 中的 Web 存储有哪些？它们的区别是什么？

localStorage

sessionStorage

示例

与 Cookie 的区别

5. 如何在 HTML5 中实现拖放功能？

基本步骤

示例

数据传输

6. HTML5 中的地理定位 API 如何使用？

基本使用

监视位置变化

注意事项

7. HTML5 中的 Web Workers 是什么？如何使用？

基本使用

类型

限制

适用场景

8. HTML5 中的 Web Sockets 是什么？如何使用？

基本使用

特点

适用场景

9. HTML5 中的表单验证 API 如何使用？

基本验证

JavaScript 验证

验证属性

验证状态

10. HTML5 中的多媒体标签有哪些？如何使用？

音频标签

视频标签

常用属性

JavaScript 控制